<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="material"></div>
</template>
  
  <script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById('material');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: [
    {
      top: '5.5%',
      left: '60%',
      textStyle: {
        color: '#fff',
        fontSize: 20,
        fontFamily: '微软雅黑'
      },
      itemWidth: 20,
      itemHeight: 20,
      data: [
        {
          name: '1',
          icon: 'rect'
        }
      ]
    },
    {
      data: [
        {
          name: '2',
          icon: 'rect'
        }
      ],
      itemWidth: 30,
      itemHeight: 2,
      top: '6%',
      left: '40%',
      textStyle: {
        color: '#fff',
        // fontWeight: "normal",
        fontSize: 20
      }
    }
  ],
  grid: {
    top: '10%',
    right: '8%',
    left: '8%',
    bottom: '27%'
  },

  xAxis: {
    type: 'category',
    data: [5, 10, 15, 20, 25, 30],
    axisLabel: {
      color: '#fff',
      interval: 0,
      fontSize: 12,
      formatter: '{value}号'
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'value',
      min: 0,
      nameTextStyle: {
        color: '#fff',
        fontSize: 22
      },
      axisLine: {
        lineStyle: {
          color: '#0a3e98'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3e98',
          type: 'dotted'
        }
      },
      axisLabel: {
        formatter: '{value}万',
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      }
    },
    {
      type: 'value',
      min: 0,
      nameTextStyle: {
        color: '#fff',
        fontSize: 22
      },
      axisLine: {
        lineStyle: {
          color: '#0a3e98'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3e98',
          type: 'dotted'
        }
      },
      axisLabel: {
        formatter: '{value}万',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      }
    }
  ],
  series: [
    {
      type: 'pictorialBar',
      symbolSize: [20, 10],
      symbolOffset: [0, -6],
      symbolPosition: 'end',
      z: 12,
      // "barWidth": "0",
      tooltip: {
        show: false
      },
      color: '#008ed7',
      data: [15, 20, 20, 28, 22, 36]
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [20, 10],
      symbolOffset: [0, 7],
      // "barWidth": "20",
      z: 12,
      tooltip: {
        show: false
      },
      color: '#00abff',
      data: [15, 20, 20, 28, 22, 36]
    },
    {
      type: 'bar',
      //silent: true,
      barWidth: '20',
      barGap: '10%', // Make series be overlap
      barCateGoryGap: '10%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: '#00d7ff'
            },
            {
              offset: 1,
              color: '#00abff'
            }
          ]),
          opacity: 1
        }
      },
      data: [15, 20, 20, 28, 22, 36]
    },
    {
      type: 'line',
      yAxisIndex: 1,
      // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      smooth: true,
      symbolSize: 0,
      lineStyle: {
        normal: {
          width: 8,
          color: '#29a5d5' // 线条颜色
        }
      },
      itemStyle: {
        normal: {
          color: '#071c33', //拐点颜色
          borderColor: '#2db6e9', //拐点边框颜色
          borderWidth: 2, //拐点边框大小
          // label: {
          //    show: true, //开启显示
          //    color: '#fff',
          //    position: 'top', //在上方显示
          //    formatter: function (res) {
          //       if (res.value) {
          //          return res.value
          //       } else {
          //          return 0
          //       }
          //    },
          // },
        }
      },
      // symbolSize: 8,   //设定实心点的大小
      areaStyle: {
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#29a5d530'
              },
              {
                offset: 0.6,
                color: '#29a5d520'
              },
              {
                offset: 1,
                color: '#29a5d510'
              }
            ],
            false
          )
        }
      },
      data: [15, 20, 20, 28, 22, 36]
    }
  ]
};

option && myChart.setOption(option);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
});
</script>
  
  <style scoped>
#material {
  width: 100%;
  height: 100%;
}
</style>